import React, { useState } from 'react';
import { Input } from 'antd';

// 定义组件的 props 类型
interface HexInputProps {
    outputType?: 'hex' | 'string'; // 输出类型，默认为 'hex'
    [k: string]: any
}


function HexInput(props: HexInputProps) {
    const { outputType = 'hex', ...others } = props
    // 使用 useState 钩子来管理输入值的状态
    const [value, setValue] = useState<string>(props.value);
    // 处理输入变化的函数
    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        // 移除所有空格并将输入转换为大写
        let input = e.target.value.replace(/\s/g, '').toLowerCase();
        // 检查输入是否包含非法字符（非 0-9, A-F）
        if (/[^0-9a-f]/.test(input)) {
            return;
        }
        let formattedValue = '';
        // 格式化输入，在每两个字符之间插入空格
        for (let i = 0; i < input.length; i += 2) {
            formattedValue += input.substr(i, 2);
            if (i + 2 < input.length) {
                formattedValue += ' ';
            }
        }
        props?.onChange?.(formattedValue)
        setValue(formattedValue);
    };


    return (
        <Input
            {...others}
            value={value}
            onChange={handleChange}
            style={{ marginBottom: 8 }}
        />
    );
}

export default HexInput;






